<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D动画</title>
    <!-- 动画的性能更优，且优先级更高 -->
    <!-- 都需要transform引用而出 -->
    <!-- 平移：translate,其中百分比的平移相对于元素本身
    旋转：rotate，以元素中心(origin)为中心基准点顺时针旋转（逆时针为负值），需要加单位deg
    缩放：scale，不改变元素在文档流中的位置
    倾斜：skew，沿X/Y轴扭曲缩放，参数为倾斜角度（支持负值）注意：倾斜的顺时针为负值,中心设置同旋转 -->

    <!-- 注意：行内元素不能直接进行旋转，需要转化为块级元素（display：inline-block；）之后才可以进行旋转，不然会有精度的问题 -->

    <!-- transition的进阶写法：过渡属性、持续时间、速度曲线、延迟时间；
        速度曲线：ease（默认）：慢速开始与结束，中间加速（easings.net获取常用缓动函数的预设值）
                 linear（匀速运动）：匀速运动
                 ease-in：慢速开始逐渐加速
                 ease-out：快速开始逐渐加速
                 ease-in-out：慢速开始和结束，中间加速，适合对称性动画
                 cubic-bezier（x1,y1,x2,y2）:贝塞尔曲线，通过四值（[0,1]）自定义曲线 (cubic-bezier.com可视化编辑贝塞尔曲线的网站)-->

    <!-- transform的复合写法：transform：A（）、B（）、C（）；核心规则，从 **右** 向 **左** 依次执行 -->
                 
    <style>

        #box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: .3s;
        }

        /* 平移不影响页面的布局，仅是视觉上的变化 */
        #box1:hover {
            transform: translateY(100px);
        }

        #box2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;   
            transform: translateX(50%);/* 百分比是相对于自身的属性，与父级容器无关 */
            transition: .5s;
        }

        #box2:hover {
            transform: translateX(200px);
        }

        #box3 {
            margin: 10px auto;
            height: 120px;
            width: 100px;   
            border: 2px solid transparent;/* 防止盒子抖动 */
            background-color: black;
            transition: .3s;
            overflow: hidden;
        }        

        #box3:hover {
            border: 2px aqua solid;
            transform: scale(1.1,1.5);/* 缩放（宽，高） */
        }

        #box3 div:first-child {
            height: 120px;
            width: 100px;
            background-color: yellow;
        }

        #box3 div:nth-child(2) {
            height: 50px;
            width: 100px;
            background-color: aqua;
            transform: translateY(50px);/* 补充平移过渡，效果更流畅,一定是给子元素加 */
            transition: transform .3s; 
        }

        #box3:hover div:nth-child(2) {
            transform: translateY(-50px);
        }

        #box4 {
            margin: 20px auto;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all .3s;
            /* 设置旋转中心基准点
            transform-origin: left top; */
        }

        #box4:hover {
            transform: rotate(-45deg);
        }

        #box4 div:first-child {
            width: 50px;
            height: 50px;
            border: 2px solid yellow;
            background-color: bisque;
        }

        #box5 {
            margin: 30px auto;
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
            transform: skew(-45deg);/* 注意：倾斜的顺时针为负值 */
        }

        #box6 {
            margin: 30px auto;
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            transition: all 1s;
        }

        #box6:hover {
            transform: translateX(300px) rotate(360deg);
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">
        <div></div>
        <div></div>
    </div>
    <div id="box4">
        <div></div>
    </div>
    <div id="box5"></div>
    <div id="box6"></div>
</body>
</html>